<template>
<el-form inline ref="form" :model="formData" :rules="rules" label-width="120px" v-loading="loading">
  <el-form-item v-for="field in fields" :key="field.name"
    :label="field.label" :prop="field.name">
    <el-input v-model="formData[field.name]"></el-input>
  </el-form-item>
  <el-form-item style="width:100%; text-align: center;">
    <el-button type="primary" @click="onSave" :loading="isSaving">保存</el-button>
    <el-button @click="onCancel">取消</el-button>
  </el-form-item>
</el-form>
</template>

<script>
import api from '@/server/customer'


var fields = [
  {name: 'enquiryDate', label: '收到询盘日前'},
  {name: 'code', label: '代码'},
  {name: 'contactsName', label: '联系人名称'},
  {name: 'productName', label: '产品名称'},
  {name: 'fromChina', label: '中国进口'},
  {name: 'procurementPlan', label: '采购计划'},
  {name: 'country', label: '国际/地区'},
  {name: 'companyWebSite', label: '公司网站'},
  {name: 'customerSource', label: '客户来源'},
  {name: 'level', label: '等级'},
  {name: 'businessType', label: '业务类型'},
  {name: 'companyName', label: '客户公司名称'},
  {name: 'email', label: '邮件地址'},
  {name: 'jobTitle', label: '职位'},
  {name: 'contractsType', label: '客户联系类型'},
  {name: 'phone', label: '电话'},
  {name: 'wechat', label: 'wechat'},
  {name: 'whatsapp', label: 'whatsapp'},
  {name: 'skype', label: 'skype'},
  {name: 'facebook', label: 'facebook'},
  {name: 'customerBirthDay', label: '客户生日'},
  {name: 'followStatus1', label: '跟踪状态1'},
  {name: 'followStatus2', label: '跟踪状态2'},
  {name: 'followStatus3', label: '跟踪状态3'}
]
/**
  event: afterSave, afterCancel
*/
export default {
  components: {
  },
  props: {
    isEdit: { type: Boolean, default: false },
    id: { type: Number }
  },
  computed: {
  },
  data() {
    const defaultFromData = {
    }
    fields.forEach(item => defaultFromData[item.name] = null)
    return {
      loading: false,
      isSaving: false,
      formData: defaultFromData,
      rules: { // trigger: change|blur
        /* code: [
          { required: true, message: '请输入项目编码', trigger: 'change' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入项目名称', trigger: 'change' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'change' }
        ],
        description: [
          { max: 100, message: '最多 100 个字符', trigger: 'change' }
        ] */
      },
      fields: fields
    }
  },
  mounted: function() {
    if (this.isEdit) {
      this.loadData()
    }
  },
  methods: {
    loadData() {
      this.loading = true
      api.get(this.id).then(resp => {
        this.loading = false
        if (resp.code === 1) {
          this.formData = resp.data.datas[0]
        } else {
          this.$message({ message: resp.message, type: 'warning' })
        }
      }).catch(() => {
        this.loading = false
      })
    },
    onSave() {
      this.isSaving = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.save()
        } else {
          this.isSaving = false
          return false
        }
      })
    },
    save() {
      api.save(this.formData).then((resp) => {
        this.isSaving = false
        if (resp.code === 1) {
          this.$message({ message: '保存成功', type: 'success' })
          this.$emit('afterSave')
        } else {
          this.$message({ message: resp.message, type: 'warning' })
        }
      }).catch(() => {
        this.isSaving = false
      })
    },
    onCancel() {
      this.$emit('afterCancel')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  
</style>
